<template>
    <div class="address">
        <div
            class="addAddressButton"
            @click="addAddressDialogFormVisible = true"
        >
            新增收获地址
        </div>
        <!-- 将来我们会对这里进行循环 -->
        <div class="info" v-for="(item, index) in allAddress" :key="index">
            <div class="clearfix">
                <span class="title fl">{{ item.signer_name }}</span>
                <div v-if="item.default" class="default fl">默认地址</div>
                <img
                    class="fr cs"
                    src="@/assets/images/profile/delete.png"
                    alt=""
                />
            </div>
            <table>
                <tr>
                    <td class="table-key">收货人:&ensp;&ensp;</td>
                    <td class="table-value">{{ item.signer_name }}</td>
                </tr>
                <tr>
                    <td class="table-key">所在地区:&ensp;&ensp;</td>
                    <td class="table-value">{{ item.area }}</td>
                </tr>
                <tr>
                    <td class="table-key">收货地址:&ensp;&ensp;</td>
                    <td class="table-value">{{ item.signer_address }}</td>
                </tr>
                <tr>
                    <td class="table-key">手机号:&ensp;&ensp;</td>
                    <td class="table-value">{{ item.telphone }}</td>
                </tr>
                <tr class="edit">
                    <td class="table-key"></td>
                    <td class="table-value" @click="editAddress(item.id)">
                        编辑
                    </td>
                </tr>
            </table>
        </div>

        <!-- 新增收获地址的弹出框 -->
        <el-dialog title="添加收货地址" v-model="addAddressDialogFormVisible">
            <el-form :model="form">
                <el-form-item label="收货人" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.signer_name"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="所在地区" :label-width="formLabelWidth">
                    <el-input v-model="form.area" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="收货地址" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.signer_address"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.telphone"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="是否默认地址"
                    :label-width="formLabelWidth"
                >
                    <el-switch
                        v-model="form.default"
                        active-color="#13fe66"
                        inactive-color="#ff4949"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addAddressDialogFormVisible = false"
                        >取 消</el-button
                    >
                    <el-button type="primary" @click="saveNewAddress"
                        >保存</el-button
                    >
                </span>
            </template>
        </el-dialog>

        <!-- 编辑地址弹出框 -->
        <el-dialog
            title="编辑收货地址"
            v-model="editaddAddressDialogFormVisible"
        >
            <el-form :model="editAddressInfo">
                <el-form-item label="收货人" :label-width="formLabelWidth">
                    <el-input
                        v-model="editAddressInfo.signer_name"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="所在地区" :label-width="formLabelWidth">
                    <el-input
                        v-model="editAddressInfo.area"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="收货地址" :label-width="formLabelWidth">
                    <el-input
                        v-model="editAddressInfo.signer_address"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth">
                    <el-input
                        v-model="editAddressInfo.telphone"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="是否默认地址"
                    :label-width="formLabelWidth"
                >
                    <el-switch
                        v-model="editAddressInfo.default"
                        active-color="#13fe66"
                        inactive-color="#ff4949"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editaddAddressDialogFormVisible = false"
                        >取 消</el-button
                    >
                    <el-button type="primary" @click="updateAddressInfo"
                        >保存</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { addAddressData, getAllAddressData, editAddressData } from "@/network/address"

let addAddressDialogFormVisible = ref(false);
let form = reactive({
    signer_name: "",
    area: "",
    signer_address: "",
    telphone: "",
    default: false,
});

let formLabelWidth = ref('120px');
const saveNewAddress = () => {
    addAddressData(form).then(res => {
        if (res.status == 7000) {
            alert("保存成功");
        }
    });
    getAllAddress();
    addAddressDialogFormVisible.value = false;
    window.location.reload();
}

let allAddress = ref([
    {
        id: "",
        signer_name: "",
        area: "",
        signer_address: "",
        telphone: "",
        default: false,
    }

])

const getAllAddress = () => {
    getAllAddressData().then(res => {
        allAddress.value = res.data;
    })
}

onMounted(() => {
    getAllAddress();
})

// 编辑收获地址逻辑
let editaddAddressDialogFormVisible = ref(false);
let editAddressInfo = reactive({
    id: "",
    signer_name: "",
    area: "",
    signer_address: "",
    telphone: "",
    default: false,
});
const editAddress = (id) => {
    // console.log(id);
    allAddress.value.forEach(element => {
        console.log(element)
        if (element.id == id) {
            editAddressInfo = element;
            if (editAddressInfo.default == 1) {
                editAddressInfo.default = true;
            } else {
                editAddressInfo.default = false;
            }
        }
    })
    editaddAddressDialogFormVisible.value = true;
}

const updateAddressInfo = () => {
    editAddressData(editAddressInfo).then(res => {

    })
    getAllAddress();
    window.location.reload();
    editaddAddressDialogFormVisible.value = false;
}

</script>

<style lang="less" scoped>
.address {
    padding-top: 15px;
    padding-left: 20px;
    width: 900px;
    padding-bottom: 20px;
    .addAddressButton {
        width: 115px;
        height: 30px;
        background-color: #f0f9e9;
        text-align: center;
        line-height: 30px;
        border: 1px solid #b3f186;
        font-weight: 700;
        &:hover {
            cursor: pointer;
        }
    }
    .info {
        margin-top: 10px;
        border: 1px solid #e6e6e6;
        width: 860px;
        height: 180px;
        > div {
            padding: 10px;
        }
        .title {
            margin-left: 30px;
            font-size: 14px;
            color: #666;
        }
        .default {
            margin-left: 20px;
            width: 55px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: #8dfa5b;
            color: white;
        }
        img {
            width: 16px;
        }
        table {
            margin-left: 30px;
            tr {
                td {
                    padding-bottom: 10px;
                }
            }
            .table-key {
                text-align: right;
                color: #999999;
                margin-left: 20px;
            }
            .table-value {
                padding-left: 10px;
                width: 730px;
            }
            .edit {
                text-align: right;
                color: #005ea7;
                &:hover {
                    cursor: pointer;
                    color: #e2231a;
                }
            }
        }
    }
}
</style>